/* eslint-disable eqeqeq */
<template>
    <div>
      <!-- 表单查询 -->
      <div>
        <el-form
          ref="queryParams"
          :model="queryParams"
          :inline="true"
          label-width="80px"
          class="loginForm"
        >
          <!-- 套餐选择 -->
          <el-form-item label="规则名称">
            <el-input
              v-model="queryParams.rname"
              placeholder="规则名称" clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="命中次数" >
            <el-input v-model="queryParams.hits" placeholder="命中次数" clearable></el-input>
          </el-form-item>
          
          

          <el-form-item label="到期时间">
            <div class="block">
              <el-date-picker
                v-model="queryParams.expires"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="到期时间"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrders">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 学员列表 -->
      <div>
        <el-table
          :data="pageBean.beanList"
          style="width: 100%"
          border
          align=""
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            align="center"
            prop="id"
            label="编号"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="rname"
            label="规则名称"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="starttime"
            label="开始时间"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="expires"
            label="到期时间"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="上线/下线"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hits"
            label="命中次数"
            width="150"
          ></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageBean.pageIndex"
          :page-sizes="[5, 10]"
          :page-size="pageBean.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageBean.totalRecord"
        ></el-pagination>
      </div>
      <!-- 编辑对话框-->
    </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      pageBean: {
        beanList: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalPage: 0,
      },
      multipleSelection: [],
      // 表单参数
      queryParams: {
        id: "",
        rname: "",
        hits: "",
        starttime: "",
        expires:"",
        status: "",
      },
      // 编辑弹框表单数据
      ordersForm: {
        orderState: "",
      },
      dialogFormVisible: false,
      // formLabelWidth: "120px",
      rules: {
        // getMan: [
        //   { required: true, message: "请输入姓名", trigger: "blur" },
        //   { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        // ],
        // note: [{ max: 50, message: "长度在50个文字内", trigger: "blur" }],
      },
    };
  },
  // 初始化调用分页查询
  created() {
    console.log("aaa");
    this.getRules();
  },
  // 表单查询提交
  methods: {
      // 确认编辑数据
      handleEdit(index, row) {
        console.log(index, row);
        this.dialogFormVisible = true;
        // 回显表单数据到对话框
        this.ordersForm = { ...row };
      },
      // 修改表单提交验证
      modifyOrders(formName) {
        this.$refs[formName].validate((valid) => {
          // 编辑信息请求
          // eslint-disable-next-line eqeqeq
          if (valid) {
            console.log("修改订单");
            this.$axios
              .put("http://localhost:8601/myorders/orderState", this.ordersForm)
              .then((resp) => {
                this.getOrders();
                this.$message("编辑成功");
                this.dialogFormVisible = false;
                this.orderState();
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 清空模态框数据
      closeDialog() {
        this.ordersForm = {};
        this.$refs.ordersForm.clearValidate();
      },
      // 初始化分页查询
      getRules() {
        console.log("aaa");
        console.log(this.queryParams);
        this.$axios
          .get("http://localhost:8601/rules/selectPage", {
            params: {
              id: this.queryParams.id,
              rname: this.queryParams.rname,
              hits: this.queryParams.hits,
              starttime: this.queryParams.starttime,
              expires:this.queryParams.expires,
              status: this.queryParams.status,
              pageIndex: this.pageIndex,
              pageSize: this.pageSize,
            },
          })
          .then((resp) => {
            // this.tableData = resp.data.data.beanList;
            this.pageBean = resp.data.data;
          });
      },
      // 条件模糊查询
      searchOrders() {
        console.log("aaa11");
        this.getRules();
      },
      // 查询分页条件
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getRules();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.getRules();
      },
    },
};
</script>
<style scoped>
.modifyForm {
  width: 100;
  /* height: 200px; */
  /* margin: 0px auto; */
  /* padding: 100px; */
}
</style>